<template>
  <div>
    <el-dialog
      title="达人管理"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"

      top="50px"
    >
      <div class="dialogBody">
        <el-radio-group v-model="radio">
          <el-radio :label="1">{{
            detailData.status == 1
              ? "冻结（冻结后达人不可发起任何活动）"
              : "解冻"
          }}</el-radio>
          <el-radio :label="2">删除达人</el-radio>
          <el-radio :label="3">删除技能</el-radio>
          <div class="paddingCon">
            <el-radio-group v-model="skill" v-if="radio == 3">
              <el-radio
                :label="item.type"
                :key="index"
                v-for="(item, index) in detailData.talent"
              >
                {{ item.type_name }}
              </el-radio>
            </el-radio-group>
          </div>

          <el-radio :label="4">添加技能</el-radio>
          <div class="padContent" v-if="radio == 4">
            <el-form
              :model="params"
              ref="ruleForm"
              label-position="right"
              label-width="100px"
              size="small"
            >
              <div v-for="(item, index) in params.skills" :key="index">
                <el-form-item
                  label="专业技能："
                  :prop="'skills.' + index + '.type'"
                  :rules="{
                    required: true,
                    message: '请选择专业技能',
                    trigger: 'change',
                  }"
                >
                  <el-select
                    v-model="item.type"
                    placeholder="请选择技能"
                    @change="selectChanged"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.id"
                      :key="index"
                      v-for="(item, index) in skillListData"
                    >
                    </el-option>
                  </el-select>
                  <el-button
                    v-show="index != 0"
                    style="margin-left: 20px; padding: 6px"
                    size="mini"
                    icon="el-icon-delete"
                    type="danger"
                    @click="editSkill(index)"
                    >删除技能</el-button
                  >
                </el-form-item>
                <el-form-item label="上传资质证明或证书：">
                  <template slot="">
                    <div @click="getIndex(index)">
                      <UploadPhoto
                        @onSuccess="onSuccess"
                        :fileList="item.pics"
                      ></UploadPhoto>
                    </div>
                  </template>
                </el-form-item>
                <el-form-item label="认证补充：">
                  <el-input
                    v-model="item.remark"
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    size="small"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
            <el-button
              style="margin-left: 100px; padding: 6px"
              size="mini"
              icon="el-icon-plus"
              type="primary"
              @click="addSkill(index)"
              >添加技能</el-button
            >
          </div>
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadPhoto from "@/components/UploadPhoto.vue";
import {
  talentDetail,
  talentFreeze,
  talentDel,
  delTalentSkill,
  talentAdd,
  checkUserSkill,
  skillList,
} from "@/api/talent.js";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      skillListData: [],
      detailData: {},
      radio: 1,
      skill: 1,
      params: {
        user_id: "",
        skills: [
          {
            type: "",
            pics: [],
            remark: "",
          },
        ],
        introduction: "",
        userName: "",
      },
      // params: {
      //   personList: [
      //     {
      //       skill: "",
      //       pic: [],
      //       desc: "",
      //     },
      //   ],
      // },
      curIndex: 0,
    };
  },

  components: { UploadPhoto },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getDetail();
    this.getSkillList();
  },

  methods: {
    getSkillList() {
      skillList({
        page: 1,
        limit: 999,
      }).then((res) => {
        if (res.code == 200) {
          this.skillListData = res.data.list;
          // console.log(this.skillListData, ">>>>");
        }
      });
    },
    //获取上传的图片地址
    onSuccess(val) {
      // this.params.personList[this.curIndex].pic = val;
      this.params.skills[this.curIndex].pics[0] = val;
    },
    getIndex(index) {
      this.curIndex = index;
    },
    addSkill(index) {
      this.params.skills.push({
        type: "",
        pics: [],
        remark: "",
      });
    },
    editSkill(index) {
      // this.params.personList.splice(index, 1);
      this.params.skills.splice(index, 1);
    },

    //达人详情
    getDetail() {
      talentDetail({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.detailData = res.data;
          this.params.user_id = res.data.user_id;
          console.log(this.detailData, "detailData");
        }
      });
    },

    //添加技能前先查询人员是否有对应的技能
    selectChanged(value) {
      checkUserSkill({ user_id: this.detailData.user_id, type: value }).then(
        (res) => {
          if (res.code == 200) {
            if (res.data == 2) {
              this.$message.warning("已存在该技能，不可重复添加");
              return;
            }
          }
        }
      );
    },

    onSubmit() {
      if (this.radio == 1) {
        //达人冻结或解冻
        talentFreeze({
          id: this.id,
          status: this.detailData.status == 1 ? 2 : 1,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.handleClose();
          }
        });
      } else if (this.radio == 2) {
        //达人删除
        talentDel({ id: this.id }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除达人成功");
            this.handleClose();
          }
        });
      } else if (this.radio == 3) {
        //删除达人的技能
        delTalentSkill({
          user_id: this.detailData.user_id,
          type: this.skill,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除技能成功");
            this.handleClose();
          }
        });
      } else {
        let params = {
          ...this.params,
        };
        params.skills = params.skills.map((item) => {
          return {
            type: item.type,
            pics: item.pics.map((pic) => pic[0].url),
            remark: item.remark,
          };
        });
        // console.log(params);
        //删除不必传入的字段
        delete params.userName;
        talentAdd(params).then((res) => {
          if (res.code == 200) {
            this.$message.success("添加技能成功");
            this.$emit("handleClose", 1);
          }
        });
      }
      // console.log(this.radio, this.skill, this.params);
    },
    handleClose() {
      this.$emit("handleClose", 1);
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .el-radio-group {
    display: flex;
    flex-direction: column;
    .el-radio {
      margin-bottom: 20px;
    }
  }
  .paddingCon {
    margin-left: 24px;
  }
}
</style>
